<template>
  <view class="root">
    <acme-app-bar title="Refresh"></acme-app-bar>
    
    <acme-refresh ref="refresh" @refresh="refresh" :scrollTop="scrollTop">
      <view slot="container">
        <view class="content">下拉刷新</view>
      </view>
    </acme-refresh>
  </view>
</template>

<script>
  import AcmeRefresh from '@/components/acme-design/refresh/index.vue'
  
  export default {
    components: {
      AcmeRefresh
    },
    data() {
      return {
        show: false,
        position: 'center',
        width: '100%',
        scrollTop: 0
      };
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop
    },
    methods: {
      refresh() {
        setTimeout(() => {
          this.$refs.refresh.completed()
        }, 2000)
      },
      runRefresh() {
        this.$refs.refresh.runRefresh()
      },
    },
  };
</script>


<style lang="scss" scoped>
  .root {
    min-height: 100vh;
    background: #f7f8fa;
    overflow: hidden;
    
    .content {
      height: calc(100vh - var(--status-bar-height) - 85upx);
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      font-size: 28upx;
    }
  }
</style>